<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="viewport" name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>绑定手机号</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <link href="/template/default/css/style_ky.css" rel="stylesheet"/>
    <!--弹窗样式-->

    <!--<script type="text/javascript" src="/template/default/js/jquery.min.js"></script>
    <script type="text/javascript" src="/template/default/js/jquery.form.js"></script>
    <script type="text/javascript" src="/template/default/js/tooltips.js"></script>-->
    <script type="text/javascript" src="/template/default/js/jquery.min.js"></script>
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>

    <link rel="stylesheet" href="/template/default/recouse/css/confirm.css?v=111"/>

    <style>
        body {
            padding-bottom: 55px
        }

        .label_radio input {
            margin-right: 5px;
        }

        .has-js .label_radio {
            padding-left: 26px;
        }

        .has-js .label_radio {
            background-position: 0 0;
            background: url(/template/default/recouse/images/radio_none.png) no-repeat;
            background-size: 16px 16px;
        }

        .has-js label.r_on {
            background-position: 0 0px;
            background: url(/template/default/recouse/images/radio_check.png) no-repeat;
            background-size: 16px 16px;
        }

        .has-js .label_radio input {
            position: absolute;
            left: -9999px;
        }

        .btn-danger {
            color: #ffffff;
            background-color: #d9534f;
            border-color: #d43f3a;
        }

        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        .money_text {
            font-size: 1.3rem;
            text-indent: 26px;
            text-align: left;
        }

        .infobox {
            border-bottom: 1px solid #ddd;
        }
    </style>

</head>

<body style="min-width: 320px;max-width: 640px;margin:0 auto;background-color: white">
<header>
    <div class="tab_nav">
        <div class="header">
            <div class="h-left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="/template/default/images/arrow_left_white.png"/></a></div>
            <div class="h-mid">绑定手机号</div>
        </div>
    </div>
</header>
<form id="orderInfoForm" name="input" action="/b/order/save" method="post" onsubmit=" return check()">
    <section class="accounts">
        <div class="coin">
            <input type="number" value="" class="money_text" id="phone" placeholder="请输入手机号"/>
        </div>
        <div class="coin">
            <input type="number" value="" class="money_text" id="captcha" placeholder="请输入验证码"/>
        </div>
        <div>
            <input style="background-color: #E50001 ;width: 60px;border-radius: 10px;text-align: center;position: absolute;right: 26px;margin-top: -42px;line-height: 2.5;color: white"
                   class="button" type="button" id="sendSms" onclick="send()" value="验证码"/>
        </div>

        <li><input id="submitBtn" value="确定" class="money_buttom" readonly/></li>
    </section>
</form>

<script src="/template/default/recouse/js/zepto.min.js" type="text/javascript"></script>

</body>
<script type="text/javascript">
    var testphone = /^0?(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
    $("#submitBtn").click(function () {
        var phone = $("#phone").val();
        var captcha = $("#captcha").val();
        if (!testphone.test(phone)) {
            layer.msg('请输入正确手机号');
            return;
        }
        if (!captcha) {
            layer.msg('请输入验证码');
            return;
        }
        $.ajax({
            url: "/b/customerCenter/phoneapplysave",
            type: 'GET',
            data: {
                "phone": phone,
                "captcha": captcha
            },
            success: function (data) {
                if (data.code == 1) {
                    //注册错误
                    layer.msg(data.desc);
                } else if (data.code == 0) {
                    window.location.href = "/b/customerCenter?shopId=${shopId!}";

                }
            }
        });
    });

    var countdown = 5;
    var isSend = true;

    //发送验证码
    function send() {
        var $this=$('#sendSms');
        console.log($this)
        var phone = $('#phone').val();
        if (!testphone.test(phone)) {
            layer.msg('请输入正确手机号');
            return;
        }
        if (isSend) {
            var count = 60;
            isSend = false;

            var timmer = setInterval(function () {
                if (count > 0) {
                    count--;
                    $this.val(count + 's');
                    $this.attr('disabled', 'disabled');
                } else {
                    $this.val('验证码');
                    $this.removeAttr('disabled');
                    window.clearInterval(timmer);
                    isSend = true;

                }

            }, 1000);
            $.ajax({

                url: "/b/customerCenter/sendSms",
                type: 'GET',
                data: {
                    "phone": phone
                },
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg("验证码发送成功");
                        settime();
                    } else if (data.code == 1) {
                        layer.msg(data.desc);
                    }
                }
            });
        }


    }

    /*    var countdown = 60;
        var timeid = 0;

        function settime() {
            if (countdown == 0) {
                $("#sendSms").attr("onclick", "send();");
                $("#sendSms").html("验证码");
                clearTimeout(timeid);
                return;
            } else {
                $("#sendSms").removeAttr('onclick');
                $("#sendSms").html("(" + countdown + ")");
                countdown--;
            }
            timeid = setTimeout(function () {
                settime()
            }, 1000)
        }*/
</script>
</html>